// export class CustomNotification {
//   private mesQueue: {
//     message: string;
//     timeout: number;
//   }[] = [];
//   private timer: null | number = null;
//   private updateLen: number = 0;
//   private containerDom: HTMLDivElement;
//   constructor() {
//     this.createMesContainer();
//   }
//   createMesContainer() {
//     const div = document.createElement("div");
//     div.id = "CustomNotification";
//     div.setAttribute(
//       "style",
//       `width: 500px; max-height: 200px; overflow-y: auto;display: flex; flex-direction: column; position: fixed; top: 20px; right: 20px; background: #f6f6f6; color: black;`
//     );
//     window.addEventListener("DOMContentLoaded", () =>
//       document.body.append(div)
//     );
//     this.containerDom = div;
//   }
//   private addEntry(data: { message: string; timeout: number }[]) {
//     const frag = document.createDocumentFragment();
//     data.forEach((val) => {
//       const para = document.createElement("span");
//       para.id = "CustomNotification" + val.timeout;
//       para.setAttribute(
//         "style",
//         "display: inline-block; width: 100%; height: fit-content; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; "
//       );
//       para.textContent = val.message;
//       frag.append(para);
//     });
//     this.containerDom.append(frag);
//   }
//   private removeEntry(data: { message: string; timeout: number }[]) {
//     data.forEach((val) => {
//       document.querySelector(`#CustomNotification${val.timeout}`)?.remove();
//     });
//   }
//   showMes(message: string) {
//     const newEntry = { message, timeout: new Date().valueOf() + 10000 };
//     this.mesQueue.push(newEntry);
//     this.addEntry([newEntry]);
//     if (this.timer) return;
//     this.timer = setInterval(() => {
//       const removeList: { message: string; timeout: number }[] = [];
//       this.mesQueue = this.mesQueue.filter((val) => {
//         if (val.timeout < new Date().valueOf()) {
//           removeList.push(val);
//           return false;
//         }
//         return true;
//       });
//       this.removeEntry(removeList);
//       if (!this.mesQueue.length) {
//         clearInterval(this.timer as number);
//         this.timer = null;
//       }
//       console.log("showMes interval");
//     }, 1000);
//   }
//   private strToHTML(str: string): ChildNode {
//     return new DOMParser().parseFromString(str, "text/html").body
//       .firstChild as ChildNode;
//   }
//   private addNewUrl(url: string | null) {
//     if (!url) return;

//     const data = this.removeQueryFromUrl(url) + ".*";
//     chrome.runtime.sendMessage({ type: "addUrl", data }, (e) => {
//       window.open(url);
//     });
//   }
//   private removeQueryFromUrl(url: string): string {
//     for (let i = 0; i < url.length; i++) {
//       const el = url[i];
//       if (el === "?" || el === "#") {
//         return url.substring(0, i);
//       }
//     }

//     return url;
//   }
// }

export class CustomNotification {
  public showMes(msg: string) {}
}
